<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>生命周期钩子</title>
	<style>

	</style>
</head>
<body>

<div id="app">
	{{ message }}
	<br>
	<button @click="message = Math.random()">button</button>
	<button onclick="destroy()">destroy</button>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
<script>
  let app = new Vue({
    el: '#app',
    data: {
      message: 'aaa'
    },
		beforeCreate: function () {
      console.log('beforeCreate 被调用')
      console.log(this.message)
    },
	  // 常用, Vue实例创建后
	  created: function () {
			console.log('created 被调用')
		  // this.message = 'bbb'
      // console.log(this.message)
    },
	  beforeMount: function () {
			console.log('beforeMount 被调用')
		  // this.message = 'ccc'
      // console.log(this.message)
    },
	  mounted: function () {
			console.log('mounted 被调用')
		  // this.message = 'ddd'
      // console.log(this.message)
    },
	  beforeUpdate: function () {
			console.log('beforeUpdate 被调用')
      console.log(this.message)
    },
	  // 常用, 数据更新好
	  updated: function () {
			console.log('updated 被调用')
      console.log(this.message)
    },
	  beforeDestroy: function () {
			console.log('beforeDestroy 被调用')
		  console.log(this.message)
    },
	  destroyed: function () {
			console.log('destroyed 被调用')
		  console.log(this.message)
    },

  })

	function destroy() {
    app.$destroy()
	}


</script>
</body>
</html>